<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../sass/reset.css">
    <link rel="stylesheet" href="../sass/reg.css">
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../js/md5.js"></script>
    <title>小米帐号 -注册</title>
</head>

<body>
    <div class="wrapper">
        <div class="wrap">
            <div class="layout">
                <div class="n-frame">
                    <div class="logo">
                        <a href="#"></a>
                    </div>
                    <div class="title">
                        <h4>注册小米帐号</h4>
                    </div>
                    <div class="reg">
                        <div class="regbox">
                            <form action="../lib/reg.php" method="POST">
                                <h4 id="resultuse">用户名</h4>
                                <label for="username">
                                    <input type="text" name="username" id="username" placeholder="邮箱/手机号码/小米ID">
                                </label>
                                <h4 id="resultpass">密码</h4>
                                <label for="password">
                                    <input type="password" name="password" id="password" password" placeholder="密码">
                                </label>
                                <h4 id="result">手机号码</h4>
                                <label for="phone">
                                    <input type="text" name="phone" id="phone" password" placeholder="+86">
                                </label>
                                <input type="submit" value="立即注册">
                            </form>
                        </div>
                        <div class="privacy">
                            <div class="msg">
                                <label>
                                        已阅读并同意：小米 
                                    <a href="#">用户协议</a>
                                    和
                                    <a href="#"> 隐私政策 </a>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="top">
            <ul>
                <li><a href="#">简体</a>|</li>
                <li><a href="#">繁体</a>|</li>
                <li><a href="#">English</a>|</li>
                <li><a href="#">常见问题</a>|</li>
                <li><a href="#">隐私政策</a>|</li>
            </ul>
        </div>
        <div class="bottom">
            小米公司版权所有-京ICP备10046444-
            <a href="#">
                <span>
                        <img src="../img/ghs.png" alt="">
                    </span> 京公网安备11010802020134号
            </a>
            -京ICP证110507号
        </div>
    </footer>
    <script>
        // 正则验证
        $(function() {
            var phoneNumber = /^1[356789]\d{9}$/;
            var username = /^[A-z]\w{5,15}$/;
            var password = /^.{6,16}$/;
            $('#phone').on('keyup', function() {
                if (phoneNumber.test(this.value)) {
                    result.innerHTML = '手机号码 通过验证';
                    result.style.color = 'green';
                } else {
                    result.innerHTML = '手机号码 没有通过验证';
                    result.style.color = 'red';
                }
            })
            $('#username').on('keyup', function() {
                if (username.test(this.value)) {
                    resultuse.innerHTML = '用户名 正确';
                    resultuse.style.color = 'green';
                } else {
                    resultuse.innerHTML = '用户名 不正确';
                    resultuse.style.color = 'red';
                }
            })
            $('#password').on('keyup', function() {
                if (password.test(this.value)) {
                    resultpass.innerHTML = '密码 正确';
                    resultpass.style.color = 'green';
                } else {
                    resultpass.innerHTML = '密码 不正确';
                    resultpass.style.color = 'red';
                }
            })
        })
    </script>
    <script type="text/javascript">
        var password = $('#password').val();
        //加密成md5
        password = $.md5(password);

        var str = $.md5("123456");
        console.log(str);
    </script>
</body>

</html>